import React, { Component } from 'react'
// 这两个组件用来定义前端路由规则,Route组件必须被Routes组件包裹
import {
  Routes,
  Route,
  Link,
  NavLink,
  Navigate,
  useRoutes, //作用: 根据数组(路由表)生成Routes和Route
} from 'react-router-dom'
import Index from './pages/Index'
import Detail from './pages/Detail'
import Test1 from './pages/Test1'
import Test2 from './pages/Test2'
import Unknow from './pages/404'
export default function App() {
  return (
    // 注意: 一般前端路由规则配置的代码,都写在App组件中
    <div>
      <NavLink
        to="/"
        style={({ isActive }) => {
          return isActive ? { fontSize: 80, color: 'hotpink' } : {}
        }}
        // 默认嵌套路由高亮,上一级路由也高亮,在上一级写上end.则嵌套高亮,上一级不高亮
        // end
      >
        index
      </NavLink>
      <NavLink
        to="/detail"
        style={({ isActive }) => {
          return isActive ? { fontSize: 80, color: 'hotpink' } : {}
        }}
      >
        detail
      </NavLink>
      <hr />
      {/* <Routes>
        <Route path="index" element={<Index></Index>}>
          <Route path="test1" element={<Test1></Test1>}></Route>
          <Route path="test2" element={<Test2></Test2>}></Route>
        </Route>
        <Route path="detail" element={<Detail></Detail>}></Route>
      </Routes> */}
      {useRoutes([
        // 一条路由规则,对应一个对象
        // {
        //   path: '/',
        //   element: <Index></Index>,
        // },
        {
          path: 'index',
          element: <Index></Index>,
          // children表示嵌套路由
          children: [
            {
              path: 'test1',
              element: <Test1></Test1>,
            },
            {
              path: 'test2',
              element: <Test2></Test2>,
            },
          ],
        },
        {
          path: 'detail',
          element: <Detail></Detail>,
        },
        {
          path: '404',
          element: <Unknow></Unknow>,
        },
        {
          // 上面的路径匹配不上,就和这个*匹配
          path: '*',
          element: <Navigate to="/404"></Navigate>,
        },
      ])}
    </div>
  )
}
